<template>
  <div class="com-echarts" :style="style">
    <div ref="echartsRef" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script>
import {nextTick, reactive, ref, toRefs} from "vue";

import config from "@/config";

export default {
  name: __NAME__,
  config,
  emits: ["elbtn", "update"],
  setup(props, ctx) {
    const echartsRef = ref(null);
    let myChart = null;
    /**
     * 数据
     * */
    const dataState = reactive({
      num: 0,
    });

    const style = ref({});
    /**
     * 初始化
     * @param {Object} view 布局属性
     * */
    function init(view) {
      // 更新样式
      updateStyle(view);
      nextTick(() => {
        // 基于准备好的dom，初始化echarts实例
        myChart = echarts.init(echartsRef.value);
        // myChart.setOption(dataState.config);
      });
    }
    /**
     * 配置变更后执行 绘制
     * @param {Array} data 数据
     * @param {Object} config 配置参数
     */
    function render(data, config={}) {
      if (Object.keys(config).length) {
        config = Object.assign({},config)
        console.log(config)
        console.log(JSON.stringify(config))
        if (!Array.isArray(data)) {
          console.error("data必须是数组");
        } else {
          // config.dataset = {}
          config.dataset.source = data
        }
      // notMerge: true 删除原先的组件重新生成新的
        myChart.setOption(config,{notMerge: true});
      }
    }

    /**
     * 大小调整
     * @param {number} width 数据
     * @param {number} height 配置参数
     */
    function resize(width, height) {
      // 比如重新渲染图表等操作
      style.value.width = `${width}px`;
      style.value.height = `${height}px`;
      nextTick(() => {
        myChart.resize();
      });
    }

    /**
     * 清空
     */
    function clear() {
      console.log("组件清空");
      myChart.clear();
    }

    /**
     * 销毁
     */
    function destroy() {
      console.log("组件销毁");
      myChart.dispose();
    }

    /**
     * 更新组件样式。
     */
    function updateStyle(styleNew) {
      style.value = Object.assign({},style.value,styleNew)
      /*for (const key in styleObj) {
        if(!Object.keys(style.value).length){
          style.value = styleObj
        } else {
          if(style.value[key]){
            style.value[key] = styleObj[key]
          }
        }
      }*/
      console.log("updateStyle",style.value)
    }

    /**
     * 自定义事件
     */
    function update() {
      console.log("update");
      ctx.emit("update", "更新组件配置");
    }

    /**
     * 自定义事件
     */
    function elbtn() {
      console.log("elbtn");
      dataState.num++;
      ctx.emit("elbtn", "点我干嘛");
    }


    return {
      ...toRefs(dataState),
      echartsRef,
      style,
      init,
      render,
      resize,
      updateStyle,
      clear,
      destroy,

      elbtn,
      update,
    };
  },
};
</script>
<style scoped lang="scss">
@import "../styles/index";
</style>
